<template>
  <view class="main-bg">
    <z-nav-bar backState='3000' @backClick='backClick' type='transparent' :titleCenter='true' title='' />
    <public-module />
    <view class="header-gradient">
      <text class="main-title">基本信息</text>
    </view>
    <view class="form-card">
      <!-- <view class="form-title">基本信息:</view> -->
      <view class="form-group">
        <text class="label">名称（选填）:</text>
        <input v-model="form.name" class="input" placeholder="请输入名称" />
      </view>
      <view class="form-group">
        <text class="label">联系电话:</text>
        <input v-model="form.phone" class="input" placeholder="请输入联系电话" />
      </view>
      <view class="form-group">
        <text class="label">邮政编码:</text>
        <input v-model="form.zip" class="input" placeholder="请输入邮政编码" />
      </view>
      <view class="form-group address-block">
        <text class="label">经营场所:</text>
        <view class="address-row1">
          <view class="address-picker-img" @click="openCityPicker">
            {{ regionText || '省 市 区/县' }}
          </view>
          <input v-model="form.town" class="address-input-img"  />
          <label class="label">(民族乡/</label>
        </view>
        <view class="address-row2">
          <label class="label">镇/街道)</label>
          <input v-model="form.village" class="address-input-img" />
          <label class="label">村(路/社区)</label>
          <input v-model="form.number" class="address-input-img" />
          <label class="label">号</label>
        </view>
        <view class="address-row3" style="margin-top: 20px;">
          <input v-model="form.detail" class="address-detail-img" placeholder="详细地址" />
        </view>
        <view v-if="cityPickerVisible">
          <cityPicker
          :column="column"
          :default-value="defaultValue"
          :mask-close-able="maskCloseAble"
          @confirm="cityPickerConfirm"
          @cancel="cityPickerCancel"
          :visible="cityPickerVisible"
        />
        </view>
      </view>
      <view class="form-group">
        <text class="label">电子商务经营者:</text>
        <picker :range="['是','否']" v-model="form.ecommerce" @change="onPickerChange('ecommerce', $event)">
          <view class="picker">{{ form.ecommerce !== '' ? ['是','否'][form.ecommerce] : '请选择' }}</view>
        </picker>
      </view>
      <view class="form-group">
        <text class="label">出资额:</text>
        <input v-model="form.capital" class="input" placeholder="请输入出资额" />
        <label class="label">万（人民币）</label>
      </view>
      <view class="form-group checkbox">
        <checkbox-group v-model="form.needPaperLicense" @change="handleChange">
          <checkbox value="needPaperLicense" :checked="form.needPaperLicense.includes('needPaperLicense')" />
        </checkbox-group>
        <text class="label">申请领取纸质执照</text>
      </view>
      <view class="form-group">
        <text class="label">副本:</text>
        <input v-model="form.copyCount" class="input" />
        <label class="label">个(电子执照系统自动生成，</label>
      </view>
      <view class="form-group">
        <text class="label">,纸质执照自行勾选 ):</text>
          <!-- <label></label> -->
      </view>
      <view class="form-group">
        <text class="label">经营范围:</text>
        <input v-model="form.scope" class="input" placeholder="请输入经营范围" />
      </view>
      <button class="submit-btn" @tap="submit">提交</button>
    </view>
  </view>
</template>

<script>
import cityPicker from '@/uni_modules/piaoyi-cityPicker/components/piaoyi-cityPicker/piaoyi-cityPicker.vue'

export default {
  components: {
    cityPicker
  },
  data() {
    return {
      form: {
        name: '', phone: '', zip: '', address: '', town: '', village: '', number: '', detail: '', ecommerce: '', capital: '', needPaperLicense: [], copyCount: '', scope: ''
      },
      cityPickerVisible: false,
      maskCloseAble: true,
      cityPickerArr: [],
      cityPickerCode: '',
      column: 3,
      defaultValue: '',
      regionText: '',
	  areaName:'',
	  cityName:'',
	  provinceName:''
    }
  },
  onLoad() {
    // 自动回显缓存
    const allFormData = uni.getStorageSync('allFormData');
    console.log(allFormData,"allFormData.jczz")
    if (allFormData) {
      this.form.name = allFormData.jcname || '';
      this.form.phone = allFormData.jcphone || '';
      this.form.zip = allFormData.jcyzbm || '';
      this.form.town = allFormData.jctownship || '';
      this.form.village = allFormData.jcvillage || '';
      this.form.number = allFormData.jch || '';
      this.form.detail = allFormData.jctxt || '';
      this.form.ecommerce = allFormData.jcjyz;
      this.form.capital = allFormData.jcje || '';
      this.form.needPaperLicense = allFormData.jczz === '是' ? ['needPaperLicense'] : [];
      this.form.copyCount = allFormData.jcfb || '';
      this.form.scope = allFormData.jcfw || '';
      // 省市区
      this.provinceName = allFormData.jcprovince || '';
      this.cityName = allFormData.jccity || '';
      this.areaName = allFormData.jcdistrict || '';
      if (this.provinceName || this.cityName || this.areaName) {
        this.regionText = `${this.provinceName} ${this.cityName} ${this.areaName}`;
      }
    }
  },
  methods: {
	  handleChange(e){
		  // 打印选中的值数组
		  console.log(e.detail.value);
      if(e.detail.value.length>0){
        this.form.needPaperLicense = ['needPaperLicense']
      }else{
        this.form.needPaperLicense = []
      }
		  // 也可以直接打印绑定的 needPaperLicense
		  console.log(this.form.needPaperLicense);
	  },
    backClick() {
      uni.navigateBack();
    },
    onPickerChange(key, e) {
      this.form[key] = e.detail.value;
	  console.log(this.form[key],"this.form[key]")
    },
    openCityPicker() {
      this.cityPickerVisible = true;
    },
    cityPickerConfirm(val) {
		console.log(val,"valval")
      this.cityPickerCode = val.code;
      this.cityPickerArr = val.name;
      this.regionText = val.name;
      this.cityPickerVisible = false;
	  this.areaName = val.areaName
	  
	  this.cityName = val.cityName
	  this.provinceName = val.provinceName
      // this.defaultValue = val.name;
    },
    cityPickerCancel() {
      this.cityPickerVisible = false;
    },
    submit() {
      console.log(this.form.ecommerce,"this.form.ecommerce")
      // 1. 读取已有缓存
      let allFormData = uni.getStorageSync('allFormData') || {};
      // 2. 解析省市区
      console.log(this.cityPickerArr,"this.cityPickerArr")
      let province = '', city = '', district = '';
      if (Array.isArray(this.cityPickerArr) && this.cityPickerArr.length >= 3) {
        province = this.provinceName || '';
        city = this.cityName || '';
        district = this.areaName || '';
      } else if (typeof this.regionText === 'string') {
        const arr = this.regionText.split(/\s+/);
        province = this.provinceName || '';
        city = this.cityName || '';
        district = this.areaName || '';
      }
      let jyz = '';
      console.log(this.form.ecommerce,"this.form.ecommerce")
      // if (this.form.ecommerce === 0) {
      //   jyz = '是';
      // } else if (this.form.ecommerce === 1) {
      //   jyz = '否';
      // } else {
      //   jyz = '';
      // }
      console.log(this.form.needPaperLicense,"form.needPaperLicense")
      // 3. 构造全量字段对象
      allFormData = {
        jcname: this.form.name || '',
        jcphone: this.form.phone || '',
        jcyzbm: this.form.zip || '',
        jcprovince: province,
        jccity: city,
        jcdistrict: district,
        jctownship: this.form.town || '',
        jcvillage: this.form.village || '',
        jch: this.form.number || '',
        jctxt: this.form.detail || '',
        jcjyz: this.form.jcjyz || '',
        jcje: this.form.capital || '',
        jczz: this.form.needPaperLicense.length > 0 ? '是' : '否',
        jcfb: this.form.copyCount || '',
        jcfw: this.form.scope || '',
        jyzname: allFormData.jyzname || '',
        jyztype: allFormData.jyztype || '',
        jyzid: allFormData.jyzid || '',
        jyzphone: allFormData.jyzphone || '',
        jyzlandline: allFormData.jyzlandline || '',
        dlrqx: allFormData.dlrqx || '',
        dlrqs: allFormData.dlrqs || '',
        dlrxg: allFormData.dlrxg || '',
        dlrtx: allFormData.dlrtx || '',
        dlrlandline: allFormData.dlrlandline || '',
        dlrphone: allFormData.dlrphone || '',
        jycsdistrict: allFormData.jycsdistrict || '',
        jycsvillage: allFormData.jycsvillage || '',
        jycsroad: allFormData.jycsroad || '',
        jycsfw: allFormData.jycsfw || '',
        jycsyt: allFormData.jycsyt || '',
        jycsfs: allFormData.jycsfs || '',
        jycsqx: allFormData.jycsqx || '',
        jycsdj: allFormData.jycsdj || ''
      };
      // 4. 存回缓存
      uni.setStorageSync('allFormData', allFormData);
      console.log(uni.getStorageSync('allFormData'))
      uni.showToast({ title: '已保存到本地', icon: 'success' });
      // 不再清空表单字段
      // this.form = { ... };
      // this.cityPickerArr = [];
      // this.cityPickerCode = '';
      // this.regionText = '';
      // this.areaName = '';
      // this.cityName = '';
      // this.provinceName = '';
    }
  }
}
</script>

<style scoped>
.main-bg {
  min-height: 100vh;
  background: #5fa8e6;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* padding: 40rpx 0 0 0; */
}
.header-gradient {
  width: 100vw;
  height: 110rpx;
  background: linear-gradient(135deg, #8ec5fc 0%, #e0c3fc 100%);
  border-bottom-left-radius: 40rpx;
  border-bottom-right-radius: 40rpx;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 32rpx;
  box-shadow: 0 8rpx 24rpx rgba(30,105,222,0.08);
}
.main-title {
  font-size: 40rpx;
  color: #222;
  font-weight: bold;
  letter-spacing: 2rpx;
}
.form-card {
  background: #5fa8e6;
  border-radius: 32rpx;
  /* padding: 40rpx 32rpx; */
  width: 90vw;
  box-shadow: 0 8rpx 32rpx rgba(30,105,222,0.10);
  color: #fff;
  margin-top: 20rpx;
  animation: fadeInUp 0.5s;
}
.form-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 32rpx;
  color: #222;
}
.form-group {
  margin-bottom: 28rpx;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.label {
  /* width: 180rpx; */
  font-size: 34rpx;
  color: #222;
  text-align: left;
  white-space: nowrap;
  margin-right: 16rpx;
}
.input, .picker {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  border-bottom: 2rpx solid #222;
  border-radius: 0;
  /* padding: 10rpx 0; */
  font-size: 34rpx;
  color: #222;
  outline: none;
}
.submit-btn {
  width: 100%;
  background: linear-gradient(90deg, #6db3f2 0%, #1e69de 100%);
  color: #fff;
  font-size: 32rpx;
  border-radius: 16rpx;
  /* padding: 24rpx 0; */
  margin-top: 32rpx;
  box-shadow: 0 4rpx 16rpx rgba(30,105,222,0.10);
  transition: background 0.2s;
}
.submit-btn:active {
  background: #1e69de;
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(40rpx); }
  to { opacity: 1; transform: translateY(0); }
}
.address-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}
.address-row1 {
  display: flex;
  width: 100%;
  margin-bottom: 8rpx;
  gap: 12rpx;
}
.address-picker-img {
  /* flex: 1; */
  background: transparent;
  border: none;
  border-bottom: 2rpx solid #222;
  font-size: 30rpx;
  color: #222;
  padding: 0 8rpx;
  height: 48rpx;
  line-height: 48rpx;
}
.address-row2 {
  display: flex;
  width: 100%;
  margin-bottom: 8rpx;
  gap: 12rpx;
}
.address-input-img {
  flex: 1;
  background: transparent;
  border: none;
  border-bottom: 2rpx solid #222;
  font-size: 30rpx;
  color: #222;
  padding: 0 8rpx;
  height: 48rpx;
  line-height: 48rpx;
}
.address-row3 {
  width: 100%;
  margin-bottom: 8rpx;
}
.address-detail-img {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 2rpx solid #222;
  font-size: 30rpx;
  color: #222;
  padding: 0 8rpx;
  height: 48rpx;
  line-height: 48rpx;
}
</style> 